/*
 * @Author: xiaosihan 
 * @Date: 2023-12-19 11:26:06 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-30 15:06:41
 */

import { autorun, toJS } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./cityList.module.less";
import { isEmpty } from "lodash";
import AutoScroll from "@components/AutoScroll/AutoScroll";
import doubtfulSituationStore from "@views/DoubtfulSituation/doubtfulSituationStore";

interface Iprops {
    children?: ReactNode
}

// 地区统计列表
export default function CityList(props: Iprops) {

    const [activeMapData, setActiveMapData] = useState(toJS(doubtfulSituationStore.activeMapData));

    useEffect(() => autorun(() => {
        const data = toJS(doubtfulSituationStore.activeMapData);
        setData(data);
    }), []);

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState(toJS(doubtfulSituationStore.sichuan_map_data));

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {
        setActiveMapData(toJS(doubtfulSituationStore.activeMapData));
        setData(toJS(doubtfulSituationStore.sichuan_map_data));
    }), []);

    return (
        isEmpty(activeMapData) ?
            <div className={styles.city_list} >
                <AutoScroll
                    className={styles.list_container}
                >
                    {
                        (data || []).map((d: any, i: number) => {
                            return (
                                <div className={styles.item} key={i} >
                                    <div className={styles.name} >
                                        {d.name}
                                    </div>
                                    <div className={styles.clue_institution} >
                                        <p className={styles.number} >{d.value}家</p>
                                    </div>
                                    <div className={styles.total_institution} >
                                        <p className={styles.number} >{d.total}家</p>
                                    </div>

                                </div>
                            )
                        })
                    }
                </AutoScroll>
            </div>
            : null
    );

}